<template>
  <v-card
    v-if="propTasks"
    class="mx-auto tasks-container rounded-lg"
    width="96%"
  >
    <v-toolbar flat>
      <div class="toolbar-left">
        <v-card-title class="card-title">
          {{ propTasks.number }} - {{ propTasks.customerName }}
        </v-card-title>
        <v-subheader class="toolbar-subtitle">
          <i>
            Admin, last updates by
            {{ propTasks.updateDate }} at {{ propTasks.updateTime }}
          </i>
        </v-subheader>
        <div class="d-flex container-title">
          <v-toolbar-title class="toolbar-title">
            {{ propProject.projectType }}- {{ propProject.projectNumber }} >
            {{ propTasks.jobNumber }}
          </v-toolbar-title>
          <v-subheader class="itemDetail-header"
            ><b>{{ propTasks.tasksSum }}</b
            >Tasks<b>{{ propTasks.activitiesSum }}</b
            >Activities</v-subheader
          >
        </div>
      </div>
      <v-spacer></v-spacer>
      <div class="toolbar-right">
        <div class="toolbar-right-btn text-right">
          <v-btn small icon>
            <v-icon small color="grey">mdi-plus-thick</v-icon>
          </v-btn>
          <v-menu content-class="action-menu" offset-y>
            <template v-slot:activator="{ on }">
              <v-btn v-on="on" small icon>
                <v-icon small color="grey">mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list flat class="action-list">
              <v-list-item class="list-item" @click="openDeleteDialog">
                <v-list-item-title>
                  <v-list-item-icon>
                    <v-icon class="delete-icon icon">mdi-delete</v-icon>
                  </v-list-item-icon>
                  <span class="text"> Delete Task </span>
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="list-item">
                <v-list-item-title>
                  <v-list-item-icon>
                    <v-icon class="icon">mdi-file-export</v-icon>
                  </v-list-item-icon>
                  <span class="text"> Export Task </span>
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
        <div class="toolbar-right-progress">
          <v-progress-linear
            :value="skill"
            color="#eb9b31"
            background-color="#BABABC"
            height="16"
            class="progress-linear"
          ></v-progress-linear>
          <span>{{ skill }} %</span>
        </div>
      </div>
    </v-toolbar>
    <v-lazy
      :options="{
        threshold: 0.5,
      }"
      min-height="500"
      transition="scroll-x-transition"
    >
      <TasksItem :selectedPanel.sync="selectedTaskIndex" :taskList="taskList" />
    </v-lazy>
    <Dialog
      v-model="showDialog"
      :show-save="false"
      width="480"
      :title="dialogTitle"
    >
      <DeleteTask></DeleteTask>
    </Dialog>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component, Watch, ModelSync } from "vue-property-decorator";
import TasksItem from "@/components/Project/Tasks/TasksItem.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import DeleteTask from "./DeleteTask.vue";
import { IProjectItem, ITasks, ITaskItem } from "@/components/Project/index";
@Component({
  components: {
    TasksItem,
    Dialog,
    DeleteTask,
  },
  props: {
    project: {
      type: Object,
      default: () => ({}),
    },
    tasks: Object,
  },
})
export default class Tasks extends Vue {
  @ModelSync("selected", "input", { type: Object })
  selectedValue!: ITaskItem | null;

  loading = false;
  skill = 10;
  selectedTaskIndexValue: number | null = null;
  get selectedTaskIndex() {
    if (this.selectedValue) {
      return this.taskList.findIndex(
        (task) => task.id === (this.selectedValue as ITaskItem).id
      );
    } else {
      return null;
    }
  }
  set selectedTaskIndex(index: number | null) {
    this.selectedTaskIndexValue = index;
  }
  @Watch("selectedTaskIndexValue")
  onSelectedTaskIndexChange(index: number | null) {
    if (typeof index === "number") {
      this.selectedValue = this.taskList[index];
    } else {
      this.selectedValue = null;
    }
  }

  get propProject(): IProjectItem {
    return this.$props.project;
  }

  get propTasks(): ITasks {
    return this.$props.tasks;
  }

  get taskList(): ITaskItem[] {
    if (this.propTasks) {
      return this.propTasks.taskList;
    } else {
      return [];
    }
  }

  // dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  openDeleteDialog() {
    this.dialogTitle = "Delete Task";
    if (!this.selectedValue) {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the task you want to delete",
        showConfirmButton: false,
        timer: 1500,
      });
      return;
    }
    this.openDialog();
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Tasks/Tasks.scss";
</style>
